<template>
  <div>
    <p class="text-center text-white bg-primary" style="padding: 10px">
      商品详情
    </p>
    <div class="media border border-light" style="margin: 10px">
      <img
        :src="$imageUrl + goods.thumbnail"
        class="align-self-top mr-3"
        style="width: 150px"
      />
      <div class="media-body">
        商品：{{ goods.name }}<br /><br />
        <p>{{ goods.content }}</p>
        价格：{{ goods.price }}元 <br /><br />
        <a @click="updategoods(goods.id)" class="btn btn-primary">编辑</a>
        <a @click="removegoods(goods.id)" class="btn btn-primary">下架</a>
      </div>
    </div>
    <br /><br />
    <div class="text-center">
      <router-link to="/goods" class="btn btn-danger">返回首页</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      goods: "",
    };
  },
  methods: {
    updategoods(id) {
      this.$router.push({
        path: "update",
        query: { id: id },
      });
    },
    removegoods(id) {
      this.$axios
        .delete("goods/" + id)
        .then((response) => {
          alert("商品已下架！");
          this.$router.push({
            path: "goods",
          });
        })
        .catch((error) => console.log(error));
    },
  },
  mounted() {
    //发送get请求
    this.$axios
      .get("goods/" + this.$route.query.id)
      .then((response) => {
        //  console.log(response);
        this.goods = response.data.data;
      })
      .catch((error) => console.log(error)); // 请求失败处理
  },
};
</script>

